<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title></title>
  <style>
	.container{
		border: 1px solid #aaa;
		width: 366px;
		float:left;	/*浮动会对间距的合并产生影响*/
	}
	.product{
		width: 100px;
		height: 140px;
		border: 1px solid #aaa;
		padding: 5px;
		margin: 5px;
		float: left;
	}
  </style>
 </head>

 <body>
  <div class="container">
	<div class="product">商品名称1</div>
	<div class="product">商品名称2</div>
	<div class="product">商品名称3</div>
	<div class="product">商品名称4</div>
	<div class="product">商品名称5</div>
	<div class="product">商品名称6</div>
	<div class="product">商品名称7</div>
	<div class="product">商品名称8</div>
	<div class="product">商品名称9</div>
  </div>
 </body>
</html>
